<template>
	<div class="main-box box-shadow">
		<el-table
			:data="data"
			ref="tableData"
      v-loading="loading"
			:header-row-class-name="tableHead"
			:row-class-name="tableRowClass"
			:row-style="{'height':'40px','cursor':'pointer','whiteSpace': 'nowrap'}"
			:header-cell-style="{'background':'rgba(246, 247, 248, 1)'}"
			max-height="720"
			height="720"
			@row-click="detailsInfo"
		>
			<el-table-column
				label="序号"
				align="center"
				type="index"
				width="125"
				></el-table-column>
			<el-table-column
				label="单号"
				prop="orderNo"
        sortable
				></el-table-column>
			<el-table-column
				label="号牌号码"
				prop="carInfo.plateNo"
				></el-table-column>
			<el-table-column
				label="进场时间"
				prop="createTime"
        sortable
				></el-table-column>
			<el-table-column
				label="品牌车型"
				prop="carInfo.carType"
        sortable
				></el-table-column>
			<el-table-column
				label="使用单位"
				prop="carInfo.actualUser"
        sortable
				></el-table-column>
			<el-table-column
				width="458"
				prop="orderStatus"
        sortable
				align="right"
				>      
				<template slot="header" slot-scope="scope">
					<div class="search-box left">
							<div class="left search"><img style="position: relative;top: 1px;" width="14" src="../../assets/images/search.svg" /></div>
							<div class="left search-input">
								<input 
                  @keyup.enter="inputLoad"
                  @input="searchBoxNull"
                  type="text" 
									v-model="search"
									:key="scope.$index"
									placeholder="输入信息按Enter键进行查询"/>
							</div>
					</div>
					<div class="left" style="line-height: 35px;">
						<div class="left" style="margin-left: 10px;">
							<img width="20" style="position: relative;top: 4px;color: #333333;" src="../../assets/images/shaixuan.svg" />
						</div>
						<div class="left" style="margin-left: 20px;">状态</div>
					</div>
				</template>
				<template slot-scope="scope">
					<div 
            style="color: rgba(140, 140, 140, 1);"
            v-if="scope.row.orderStatus == 1">报修</div>
					<div 
            style="color: rgba(2, 124, 232, 1)"
            v-if="scope.row.orderStatus == 2">在修</div>
					<div
            style="color: rgba(139, 187, 17, 1)"
            v-if="scope.row.orderStatus == 3">完工</div>
					<div
            style="color: rgba(255, 59, 48, 1)"
            v-if="scope.row.orderStatus == 4">审核</div>
					<div
            style="color: rgba(250, 140, 22, 1)"
            v-if="scope.row.orderStatus == 5">结算</div>
					<div 
            class="complete-order" 
            @click="getCompleteOrder(scope.row.id)"
            v-if="scope.row.orderStatus == 6">生成结算单</div>
				</template>
			</el-table-column>
			<el-table-column
				width="47"
			></el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {getListbyPage} from '@/api/workspace/work_order'
  import $ from 'jquery'
	export default{
    props:{
      siteId:Number
    },
		data() {
			return {
				pageNum:1,
				pageSize:20,
				sort:1,
				data:[],
				search:'',
        loading:true,
        scroll:false
			}
		},
		mounted() {
			this.load();
			//滚动加载数据
			this.tableListener()
		},
		methods:{
			load: function(){
				var that = this;
        if(!that.scroll) {
          that.loading = true;
        }
        // console.log(this.siteId);
        // if(key != null) {
        //   that.siteId = key;
        // }
        
				getListbyPage({pageNum:that.pageNum,pageSize:that.pageSize,sort:1,siteId:that.siteId,sname:that.search}).then(response => {
					var _data = response.data;
            // console.log(_data)
					if(_data.status == 200){
						that.data = _data.data;
            that.loading = false;
            that.scroll = false;
						// console.log(_data)
					}else {
						that.$message({
              message:"请求失败",
              showClose:true,
              offset:'100'
            });
					}
				}).catch(erro => {
					alert(erro)
				})
			},
      inputLoad:function() {
        this.scroll = true;
        this.load();
        this.pageSize = 20;
      },
			tableRowClass:function({rowIndex}) {
				if (rowIndex % 2 === 0) {
          //样式见layout文件
					return 'table-row-color';
				}
        //样式见layout文件
				return 'table-row-color-2';
			},
			tableHead:function(){
        //样式见layout文件
				return 'table-head-2';
			},
			tableListener:function(){
				var that = this;
				var dom = that.$refs.tableData.bodyWrapper
				dom.addEventListener('scroll',function(){
					const scrollDistance = dom.scrollHeight - dom.scrollTop - dom.clientHeight;
					if(scrollDistance <= 0) {
						that.pageSize += 10;
            that.scroll = true;
						that.load();
					}
				})
			},
			detailsInfo:function(row){

				this.$router.push({
					path:'/main/settlement',
					query:{
						id:row.id
					}
					})
			},
      getCompleteOrder:function(id){
        // console.log(id)
        var that = this;
        that.$router.push({
          path:'/main/complete',
          query:{
            id:id
          }
        })

      },
      searchBoxNull:function (e) {
        if($(e.target).val().length == 0) {
          this.inputLoad();
        }
      }
		}
	}
</script>

<style lang="css" scoped>
	.main-box{
		height: 750px;
		margin: 10px;
		border-radius: 8px;
		overflow: hidden;
	}
	.search-box{
		width: 330px;
		height: 35px;
		background-color: white;
	}
	.search{
		line-height: 35px;
		margin-left: 10px;
	}
	.search-input input{
		border: none;
		outline: medium;
		margin: 10px;
		overflow-wrap: break-word;
		color: rgba(0, 0, 0, 1);
		font-size: 10px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
    width: 280px;
	}
	.left{
		float: left;
	}
	.table-foot{
		height: 22px;
		padding: 9px 27px;
		background-color: rgba(250, 140, 22, 0.1);
	}
	.table-foot-download{
		cursor: pointer;
		width: 70px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		font-family: PingFangSC-Medium;
		white-space: nowrap;
		line-height: 20px;
		float: left;
	}
	.table-sum{
		float: right;
		margin-right: 30px;
		overflow-wrap: break-word;
		color: rgba(51, 51, 51, 1);
		font-size: 14px;
		white-space: nowrap;
	}
  .complete-order {
    font-weight: Regular;
    text-decoration: underline;
    color: rgba(250, 140, 22, 1);
    font-size: 10px;
  }
</style>